<template>
  <div class="personal-panel">
    <div class="personal-desc">
      <div class="avatar-container">
        <!-- <img class="avatar" :src="user.avatar" /> -->
        <div class="oneString" @click="$router.push('/perCenter')">{{ user.name.substr(0, 1) }}</div>
      </div>
      <!-- <div class="name-role">
        <el-button type="primary" plain >个人中心</el-button>
      </div> -->
      <div class="name-role">
        <span class="sender">你好：{{ user.name }}！</span>
      </div>
      <div class="registe-info">
        <span class="registe-info">{{ user.registeInfo }}</span>
      </div>
    </div>

    <!-- <div class="personal-relation">
        <span class="relation-item">followers</span>
        <span class="relation-item">watches</span>
        <span class="relation-item">friends</span>
    </div>-->

    <!-- <div class="main-operation">
        <span class="main-operation-item">
          <el-button size="small" icon="fa fa-male"> 个人中心</el-button>
        </span>
        <span class="main-operation-item">
          <el-button size="small" icon="fa fa-key"> 修改密码</el-button>
        </span>
    </div>-->

<!--    <div class="other-operation">-->
      <!-- <div class="other-operation-item">
        <li class="fa fa-bell"></li>
      </div>-->
      <!-- <div class="other-operation-item">
          <li class="fa fa-user"></li>
          在线人数
        </div>
        <div class="other-operation-item">
          <li class="fa fa-bell"></li>
          访问次数
        </div>
        <div class="other-operation-item" @click="showBackupDialog">
          <li class="fa fa-undo"></li>
          {{$t("common.backupRestore")}}
      </div>-->
<!--    </div>-->
    <div class="personal-footer" @click="logout">
      <li class="fa fa-sign-out"></li>
      {{ $t('common.logout') }}
    </div>
    <!--备份还原界面-->
    <backup ref="backupDialog" @afterRestore="afterRestore"></backup>
  </div>
</template>

<script>
import Cookies from 'js-cookie';
import Backup from '@/views/Backup/Backup';
export default {
  name: 'PersonalPanel',
  components: {
    Backup
  },
  props: {
    user: {
      type: Object,
      default: {
        name: '',
        avatar: '',
        role: '',
        registeInfo: ' '
      }
    }
  },
  data() {
    return {};
  },
  methods: {
    // 退出登录
    logout: function () {
      this.$confirm('确认退出吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          sessionStorage.clear();
          localStorage.clear();
          this.deleteCookie('token');
          this.$router.push('/login');
          this.$store.commit('updateOrga', []);
          this.$store.commit('updateCom', []);
          this.$store.commit('updateMainTabs', []);
        })
        .catch(() => {});
    },

    // 删除cookie
    deleteCookie: function (name) {
      Cookies.remove(name);
    },
    // 打开备份还原界面
    showBackupDialog: function () {
      this.$refs.backupDialog.setBackupVisible(true);
    },
    // 成功还原之后，重新登录
    afterRestore: function () {
      this.$refs.backupDialog.setBackupVisible(false);
      sessionStorage.removeItem('user');
      this.deleteCookie('token');
      this.$router.push('/login');
      this.$api.login
        .logout()
        .then((res) => {})
        .catch(function (res) {});
    }
  },
  mounted() {}
};
</script>

<style scoped>
.oneString {
  margin: 0 auto;
  color: #fff;
  background: #409eff;
  height: 60px;
  width: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 60px;
  font-size: 20px;
  cursor: pointer;
}
.personal-panel {
  font-size: 14px;
  width: 280px;
  text-align: center;
  border-color: rgba(180, 190, 190, 0.2);
  border-width: 1px;
  border-style: solid;
  background: rgba(182, 172, 172, 0.1);
  margin: -14px;
}
.personal-desc {
  padding: 15px;
  color: #000;
}
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 90px;
}
.name-role {
  font-size: 16px;
  padding: 5px;
  margin-top: 20px;
}
.personal-relation {
  font-size: 16px;
  padding: 12px;
  margin-right: 1px;
  background: rgba(200, 209, 204, 0.3);
}
.relation-item {
  padding: 12px;
}
.relation-item:hover {
  cursor: pointer;
  color: rgb(19, 138, 156);
}
.main-operation {
  padding: 8px;
  margin-right: 1px;
  /* background: rgba(175, 182, 179, 0.3); */
  border-color: rgba(201, 206, 206, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}
.main-operation-item {
  margin: 15px;
}
.other-operation {
  padding: 15px;
  margin-right: 1px;
  text-align: left;
  border-color: rgba(180, 190, 190, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}
.other-operation-item {
  padding: 12px;
}
.other-operation-item:hover {
  cursor: pointer;
  background: #9e94941e;
  color: rgb(19, 138, 156);
}
.personal-footer {
  margin-right: 1px;
  font-size: 14px;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
  border-color: rgba(180, 190, 190, 0.2);
  border-top-width: 1px;
  border-top-style: solid;
}
.personal-footer:hover {
  cursor: pointer;
  color: rgb(19, 138, 156);
  background: #b1a6a61e;
}
.myCenter {
  background: rgb(86, 176, 236);
  padding: 10px;
}
</style>
